<template>
  <div>
    <Header></Header>
    <div class="button-nav p-40">
      <div class="box">
        <div class="pt-10 pb-10 pl-20 pr-20 bg-grey flex font-14">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>考试</el-breadcrumb-item>
            <el-breadcrumb-item>当前登录：{{token}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <div class="flex space-between items-center bg-grey bg-shadow p-20 mt-30"
               v-for="(item, index) in list" :key="index">
            <div class="flex items-center">
              <el-icon size="20" color="#005eff"><InfoFilled /></el-icon>
              <div class="font-bold ml-20 font-18">{{ item.name }}</div>
            </div>
            <el-button type="primary" @click="goUrl('/exam/questions?id='+item.id)">开始考试</el-button>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import {getExamList} from "@/api/api";

export default {
  name: "Learn",
  components: {
    Header, Footer
  },
  data() {
    return {
      list: [],
      token: ''
    }
  },
  mounted() {
    this.getList()
    this.token = localStorage.getItem('xx-token')
  },
  methods: {
    async getList() {
      this.list = await getExamList()
    },
    goUrl(url) {
      const _this = this
      _this.$router.push(url)
    }
  }
}
</script>

<style scoped>

</style>
